import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './login.css'
import http from '../../utils/request'
import useCountDown from '../../hooks/useCountDown'
import { useForm } from 'antd/es/form/Form'
import { useDispatch } from 'react-redux'
import { setListSlice } from '../../reducers/listSlice'
function Login() {
  const dis = useDispatch()
  const [form] = useForm()
  const { count, isRun, start } = useCountDown(10)
  const onFinish = async (values) => {
    console.log('Success:', values)
    const res = await http.post('/login', values)
    console.log('登录', res)
    const { code, message, token } = res.data
    if (code == 1) {
      alert(message)
      localStorage.setItem('token', token)
      localStorage.setItem('username', values.username)
      window.location.href = '/home/index'
      const response = await http.get('/getUserInfo', { params: values })
      console.log('用户信息', response)
      const { pic, name } = response.data.data
      if (response.data.code == 1) {
        dis(
          setListSlice({
            pic: pic,
            Nickname: name,
          })
        )
      }
    }
  }
  return (
    <div className="box">
      <div className="form-box">
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 10 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          // layout="inline"
        >
          <h1 className="h1">欢迎登录</h1>
          <Form.Item
            label={<UserOutlined />}
            name="username"
            rules={[
              { required: true, message: '请输入账号！' },
              { pattern: /^.{4,8}$/, message: '4-8位' },
            ]}
          >
            <Input placeholder="请输入账号" />
          </Form.Item>

          <Form.Item
            label={<LockOutlined />}
            name="password"
            rules={[
              { required: true, message: '请输入密码！' },
              {
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_]).{5,10}$/,
                message: '数字字母下划线',
              },
            ]}
          >
            <Input.Password placeholder="请输入密码！" />
          </Form.Item>
          <Form.Item
            label="验证码"
            name="code"
            layout="inline"
            rules={[
              { required: true, message: '请输入账号！' },
              { pattern: /^.{4}$/, message: '4-8位' },
            ]}
          >
            <Input placeholder="验证码" />
          </Form.Item>
          <Form.Item label={null} layout="inline">
            <Button
              disabled={isRun}
              onClick={() => {
                start()
                const code = Math.random().toString(36).slice(2, 6)
                setInterval(() => {
                  form.setFieldsValue({ code: code })
                }, 3000)
              }}
            >
              {isRun ? `${count}秒后重新获取` : '获取验证码'}
            </Button>
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked" label={null}>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item label={null}>
            <Button block type="primary" htmlType="submit">
              登录
            </Button>
            <Button block style={{ border: 'none', color: 'blue' }}>
              忘记密码
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
